<template>
	<li class="pet-details">
		<view class="box">
			<!-- 这个图像可以替换成宠物logo，猫猫头or狗狗头，用来区别猫狗 -->
			<!-- 猫登记为1，狗为0 -->
			<view class="pet-logo-box">
				<!-- <span class="pet-type ? iconfont icon-mao:iconfont icon-gou"></span> -->
				<span class="iconfont icon-mao"></span>
			</view>
			<view class="pet-detail">
				<view>宠物名称</view>
				<view>宠物品种</view>
				<text>宠物年龄</text>
			</view>
			<view class="btn-box">
				<span class="iconfont icon-gengduo"></span>
				<span class="iconfont icon-shanchu"></span>
			</view>
		</view>
	</li>
</template>

<script setup>
</script>

<style scoped>
	.pet-details{
	border: 1px solid green;
	magrin: 50rpx 0;
	border-radius: 20rpx;
	}
.box{
	display: flex;
	justify-content: space-around;
	align-items: center;
	width: 750rpx;
	height: 150rpx;
	magrin: 50rpx 0;
	border: 1rpx solid gray;
	border-radius: 20rpx;
	/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
	box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
}
.pet-logo-box{
	/* 放图标的盒子，设为头像，圆形 */
	width: 100rpx;
	height: 100rpx;
	border: 1rpx solid black;
	border-radius: 50%;
	overflow: hidden;
}
.icon-mao, .icon-gou{
	/* 图标-猫 */
	font-size: 3rem;
	border: 1rpx solid black;
}
.pet-detail{
	/* 文字盒子 */
	display: flex;
}
.pet-detail>text{
	/* 文字描述 */
	display: inline-block;
}
.btn-box>*{
	/* 按钮盒子 */
	margin-right: 10rpx;
}
</style>